.header {
  height: 680px;
  background-image: url('http://assets.dtstack.com/UEDLanding/Home/home_bg.png');
  // background-image: url('http://assets.dtstack.com/UEDLanding/Home/home_background.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;

  .topImgBox {
    position: relative;
    .titleImg {
      width: 423px;
      height: 39px;
      position: absolute;
      top: 185px;
      left: calc(50vw - 211px);
    }
    .dImg {
      width: 400px;
      height: 337px;
      position: absolute;
      top: 200px;
      left: calc(50vw + 532px);
      z-index: 1;
    }
    .tImg {
      width: 294px;
      height: 193px;
      position: absolute;
      top: 194px;
      left: calc(50vw + 340px);
    }
    .uImg {
      width: 347px;
      height: 334px;
      position: absolute;
      top: 142px;
      left: calc(50vw - 669px);
    }
    .eImg {
      width: 328px;
      height: 190px;
      position: absolute;
      top: 364px;
      left: calc(50vw - 563px);
    }
    .bigImg {
      width: 475px;
      height: 382px;
      position: absolute;
      top: 235px;
      left: calc(50vw - 167px);
    }
    .smallImg {
      width: 246px;
      height: 190px;
      position: absolute;
      top: 226px;
      left: calc(50vw + 110px);
    }
    .noHover {
      &:hover {
        animation: none;
      }
    }
    img {
      -webkit-user-drag: none;
      &:hover {
        animation: shake 3s ease-in-out infinite;
      }
    }
  }
  @keyframes shake {
    10%, 90% { transform: translate3d(-1.5px, 0, 0); }
    20%, 80% { transform: translate3d(+3px, 0, 0); }
    30%, 70% { transform: translate3d(-4.5px, 0, 0); }
    40%, 60% { transform: translate3d(+4.5px, 0, 0); }
    50% { transform: translate3d(-4.5px, 0, 0); }
  }
}
@media screen and (max-width: 1600px){
  .header {
    .topImgBox{
      .dImg {
        left: calc(50vw + 356px);
      }
      .tImg {
        left: calc(50vw + 164px);
      }
      .bigImg {
        left: calc(50vw - 343px);
      }
      .smallImg {
        left: calc(50vw - 66px);
      }
    }
  }
}
@media screen and (max-width: 750px){
  .header {
    background-image: url("http://assets.dtstack.com/UEDLanding/H5/homeBg.png");
    .title{
      cursor: pointer;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      img {
        width: 423px;
        height: 39px;
        -webkit-user-drag: none;
      }
      &:hover {
        animation: shake 2s ease-in-out infinite;
      }
    }
  }
}

.body {
  height: 518px;
  font-size: 20px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #3D446E;
  line-height: 28px;
  text-align: center;

  .container {
    display: flex;
    justify-content: center;
    a{
      text-decoration:none;
      color: #3D446E;
    }

    .box {
      width: 373px;
      background: #F1F9FE;
      border-radius: 16px;
      margin-right: 40px;
      cursor: pointer;
      transition: box-shadow .3s;
      &:last-child {
        margin-right: 0;
      }

      img {
        width: 160px;
        height: 140px;
      }

      .subTitle {
        font-size: 14px;
        font-weight: 400;
        color: #64698B;
        padding: 15px 40px;
      }
    }
    .box:hover {
      box-shadow: 0 3px 6px -4px #0000001f, 0 6px 16px #00000014, 0 9px 28px 8px #0000000d;
    }
  }
  .title {
    padding-top: 80px;
  }
}
@media screen and (max-width: 750px){
  .body {
    margin-bottom: 30px;
    height: auto;
    .container {
      flex-wrap: wrap;
      .box{
        width: 80%;
        margin: 0 0 30px 0;
        .subTitle {
          font-size: 18px;
        }
      }
    }
    .title{
      font-size: 24px;
      padding-top: 0;
    }
  }
}

.origin {
  background: #EBF5FD;
  font-family: PingFangSC-Semibold, PingFang SC;
  position: relative;
  .originBox {
    width: 1200px;
    padding: 60px 0 30px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    .originItem {
      width: 274px;
      height: 238px;
      margin: 0 30px 30px 0;
      padding: 20px;
      transition: box-shadow .3s;
      background: rgba(255, 255, 255, 0.7000);
      border-radius: 16px;
      backdrop-filter: blur(10px);
      &:nth-child(4n) {
        margin: 0 0 40px 0;
      }
      img {
        width: 50px;
        height: 50px;
        margin-right: 20px;
      }
      .title {
        font-size: 20px;
        font-weight: 600;
        color: #3D446E;
      }
      .subTitle {
        font-size: 14px;
        color: #64698B;
        margin: 12px 0;
      }
    }

    .originItem:hover {
      box-shadow: 0 3px 6px -4px #0000001f, 0 6px 16px #00000014, 0 9px 28px 8px #0000000d;
    }
  }
}
@media screen and (max-width: 750px){
  .origin {
    height: auto;
    align-content: flex-start;
    background-image: url("http://assets.dtstack.com/UEDLanding/H5/originBg.png");
    .originBox {
      width: 100%;
      justify-content: center;
      .originItem {
        width: 90%;
        margin: 0 0 40px 0;
        .title {
          font-size: 24px;
        }
        .subTitle {
          font-size: 18px;
        }
        a {
          font-size: 18px;
        }
      }
    }
  }
}

.footer {
  height: 180px;
  text-align: center;

  .describe {
    font-weight: 400;
    font-family: PingFangSC-Regular, PingFang SC;
    line-height: 20px;
    color: #8B8FA8;
    font-size: 12px;
  }
}
@media screen and (max-width: 750px) {
  .footer {
    .describe {
      font-size: 18px;
    }
  }
}
